<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="/taobao/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/taobao/css/style.css"/>
      <script src="/taobao/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(window).load(function(){
    		$(".loading").addClass("loader-chanage")
    		$(".loading").fadeOut(300)
    	})
    </script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
<body style="background-color: #fff;">
	<header class="page-header fixed-header">
		<input type="search"  /> 
		<span>
			<img src="/taobao/images/serach.png"/>
		</span>
	</header>
	
	<div class="contaniner fixed-cont">
		<aside class="assort">
			<ul>
				<li class="active" th:each="type:${goodsTypeList}">
					<img src="/taobao/images/classify01.png"/>
					<span th:text="${type.name}">母婴用品</span>
				</li>

			</ul>
		</aside>
		
		<section class="assort-cont">
			<figure>
				<a href="#">
					<img src="/taobao/images/classify-ph01.png"/>
				</a>
			</figure>
			<dl>
				<dt>宝宝营养</dt>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph02.png"/>
						<p>DNA</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph03.png"/>
						<p>钙剂</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph02.png"/>
						<p>DNA</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph03.png"/>
						<p>钙剂</p>
					</a>
				</dd>
			</dl>
			<dl>
				<dt>妈妈专区</dt>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph04.png"/>
						<p>DNA</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph05.png"/>
						<p>钙剂</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph04.png"/>
						<p>DNA</p>
					</a>
				</dd>
				<dd>
					<a href="#">
						<img src="/taobao/images/classify-ph05.png"/>
						<p>钙剂</p>
					</a>
				</dd>
			</dl>
		</section>
	</div>
	
	<footer class="page-footer fixed-footer">
		<ul>
			<li>
				<a href="index.html">
					<img src="/taobao/images/footer001.png"/>
					<p>首页</p>
				</a>
			</li>
			<li class="active">
				<a href="assort.html">
					<img src="/taobao/images/footer02.png"/>
					<p>分类</p>
				</a>
			</li>
			<li>
				<a href="shopcar.html">
					<img src="/taobao/images/footer003.png"/>
					<p>购物车</p>
				</a>
			</li>
			<li>
				<a href="self.html">
					<img src="/taobao/images/footer004.png"/>
					<p>个人中心</p>
				</a>
			</li>
		</ul>
	</footer>
	
	
</body>
</html>